<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<style type="text/css">
			body{
				background: #FFFFFF;
			}
			.text_h{
				float: right;
				font-size:17px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(255,255,255,1);
				line-height: 44px;
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			a , .mui-title{
				color:rgba(255,255,255,1);
			}
			
			.watch_one{
				width: 100%;
				position: relative;
				float: left;
				box-sizing: border-box;
			}
			.watch_three{
				width: 100%;
				position: relative;
				float: left;
			}
			.three_fir{
				width: 39%;
				position: relative;
				float: left;
				padding-left: 15px;
				padding-top: 20.5px;
				box-sizing: border-box;
			}
			.three_fir>img{
				width:116.5px;
				height:73.5px;
				border-radius:2px 2px 0px 0px;
			}
			.three_se{
				width: 57%;
				position: relative;
				float: left;
				box-sizing: border-box;
				padding-top: 17px;
			}
			.three_se>span:nth-child(1){
				font-size:15px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				padding-right: 10px;
			}
			.three_se>span:nth-child(2){
				background:rgba(254,97,94,1);
				border-radius:3px;
				padding: 4px 10px;
				font-size:12px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(255,255,255,1);
			}
			.mui-input-row{
				width: 61%;
				position: relative;
				float: none;
				line-height: 35px;
			}
			.mui-input-row{
				clear:none
			}
			.mui-input-row label{
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(153,153,153,1);
				padding: 0px 0px;
			}
			.mui-radio input[type='radio']:checked:before, .mui-checkbox input[type='checkbox']:checked:before {
				color: #FE635F;
				
		}
			.three_thi>input{
				float: right;
				position: absolute;
				right: 30px;
				bottom: 6px;
				width: 22px;
				height: 22px;
				-webkit-appearance: radio;
			}
			

			
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">收藏</h1>
			<sapn class="text_h">编辑</span>
		</header>
		<div class="mui-content">
			
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user =  plus.storage.getItem('user');
				user = JSON.parse(user);
				var page = 1;
				mui.init({
				  pullRefresh : {
				    container:'body',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				    up : {
				      height:50,//可选.默认50.触发上拉加载拖动距离
				      auto:true,//可选,默认false.自动上拉加载一次
				      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
				      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
				      callback :function(){
						  // mui.alert('haha')
						  getData(function(){
							  mui('body').pullRefresh().endPullupToRefresh();
						  })
					  } //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    }
				  }
				});
				function getData(func){
					if(page==0){
						mui.toast('没有更多了！')
						if(func){
							func()
						}
						return
					}
					plus.nativeUI.showWaiting();
					mui.post(url+'/juyou/index/getvideocollection',{token:user.token,page:page},function(res){
						plus.nativeUI.closeWaiting();
						// mui.alert(res.code)
						if(res.code==200){
							var str = '';
							if(res.data.length<10){
								page = 0;
							}else{
								page = page+1;
							}
							mui.each(res.data,function(i,v){
								if(v.youxiaoqi){
									str+='<div class="watch_one">'+
											'<div class="watch_three">'+
												'<div class="three_fir ondian" data-id="'+v.shipin.id+'">'+
													'<img src="'+v.shipin.covers+'" alt="">'+
												'</div>'+
												'<div class="three_se ondian" data-id="'+v.shipin.id+'">'+
													'<span>'+v.shipin.name+'</span>'+
													'<span>永久有效</span>'+
												'</div>'+
												'<div class="mui-input-row mui-checkbox">'+
													 ' <label class="ondian" data-id="'+v.shipin.id+'">'+v.create_time+'</label>'+
													  '<input name="checkbox1" value="Item 1" type="checkbox" data-id="'+v.id+'" style="display: none;" class="inp">'+
												'</div>'+
											'</div>'+
										'</div>';
								}else{
									str+='<div class="watch_one">'+
											'<div class="watch_three">'+
												'<div class="three_fir ondian" data-id="'+v.shipin.id+'">'+
													'<img src="'+v.shipin.covers+'" alt="">'+
												'</div>'+
												'<div class="three_se ondian" data-id="'+v.shipin.id+'">'+
													'<span>'+v.shipin.name+'</span>'+
													// '<span>永久有效</span>'+
												'</div>'+
												'<div class="mui-input-row mui-checkbox">'+
													 ' <label class="ondian" data-id="'+v.shipin.id+'">'+v.create_time+'</label>'+
													  '<input name="checkbox1" value="Item 1" data-id="'+v.id+'" type="checkbox" style="display: none;" class="inp">'+
												'</div>'+
											'</div>'+
										'</div>';
								}
								
							})
							$(".mui-content").append(str);
							//点击编辑
							mui(".mui-bar").on("tap",".text_h",function(){
								var str = $(this).text();
								var that = this;
								
								$(this).text("删除");
								$(".inp").show();
								if(str=='删除'){
									var checkbox = $("[type=checkbox]");
									var id = [];
									// var hid = '';
									mui.each(checkbox,function(i,v){
										if(v.checked==true){
											// mui.alert($(v).attr('data-id'))
											id.push($(v).attr('data-id'))
										}
									})
									if(id.length==0){
										mui.toast('请选择数据');
										$(this).text('编辑');
										$(".inp").hide()
										return;
									}
									mui.confirm('你确定要删除吗？','提示',['取消','确认'],function (e) {
										if(e.index==1){
											plus.nativeUI.showWaiting();
											mui.post(url+'/juyou/index/delvideocollection',{token:user.token,id:id},function(res){
												plus.nativeUI.closeWaiting();
												mui.toast(res.msg);
												if(res.code==200){
													window.location.reload();
												}
												$(that).text('编辑');
												$(".inp").hide()
											})
										}else{
											$(that).text('编辑');
											$(".inp").hide()
										}
									})
									
								}
							 // event.stopPropagation();
							})
							
							
							mui(".watch_one").on("tap",".ondian",function(){
								// mui.alert('haha')
								var id= $(this).attr('data-id');
								// mui.alert(id)
								// return
								 // event.stopPropagation();
								mui.openWindow({
									url:"../sub1/video.html",
									id:"../sub1/video.html",
									extras: {
									videoid:id,
									},
								})
							})
						}else{
							mui.toast(res.msg);
						}
						if(func){
							func()
						}
					})
					
				}
				
			})
			
		</script>
	</body>

</html>
